<template>
  <el-dialog :modelValue="visiable" title="牵引方向" width="1000" @closed="emit('closed')">
    <div class="flex justify-between mb-2">
      <el-input v-model="searchValue" placeholder="输入名称" clearable @change="" style="width: 240px" />
      <el-button type="primary" size="default" @click="addOrder" class="flex items-center"
        >新增
        <Plus theme="outline" size="18" fill="#fff" class="ml-1" />
      </el-button>
    </div>
    <el-table :data="orders" border>
      <el-table-column type="expand">
        <template #default="props">
          <el-card shadow="hover" class="m-2">
            <div class="flex justify-between items-center border-b pb-2">
              <div class="flex flex-col items-center gap-1">
                <el-text class="text-xs text-gray-400">{{ props.row.zhangLiTower.tName }}</el-text>
                <el-tag type="success" size="small">张力场</el-tag>
              </div>
              <div class="cursor-pointer">
                <Switch theme="outline" size="28" fill="#333" />
              </div>
              <div class="flex flex-col items-center gap-1">
                <el-text class="text-xs text-gray-400">{{ props.row.qianYinTower.tName }}</el-text>
                <el-tag type="success" size="small">牵引场</el-tag>
              </div>
            </div>
            <!-- 牵引绳 -->
            <div class="flex justify-between items-center my-2 border-b pb-2">
              <div class="flex justify-between items-end gap-1">
                <span class="text-xs text-gray-600">牵引绳</span>
                <span class="text-xs text-gray-800 font-bold">{{ props.row.qianYinWire.wireStyle }}</span>
              </div>
              <el-tag type="success" size="small">{{ props.row.qianYinWire.wireWeight }}kg/m</el-tag>
            </div>
            <!-- 导引绳 -->
            <div class="flex justify-between items-center my-2 border-b pb-2">
              <div class="flex justify-between items-end gap-1">
                <span class="text-xs text-gray-600">导引绳</span>
                <span class="text-xs text-gray-800 font-bold">{{ props.row.daoYinWire.wireStyle }}</span>
              </div>
              <el-tag type="success" size="small">{{ props.row.daoYinWire.wireWeight }}kg/m</el-tag>
            </div>
            <!-- 修改按钮 -->
            <div class="flex justify-end items-center">
              <el-button size="small" @click="addOrder">确认修改</el-button>
            </div>
          </el-card>
        </template>
      </el-table-column>

      <el-table-column type="index" label="序号" width="70" align="center" />
      <el-table-column prop="orderName" label="牵引内容" align="center" width="100" />
      <el-table-column prop="qianYinWire.wireStyle" label="牵引绳" width="100"> </el-table-column>
      <el-table-column prop="daoYinWire.wireStyle" label="导引绳" width=""> </el-table-column>
      <el-table-column prop="moZuNum" label="摩阻系数" align="center" width="100"> </el-table-column>
      <el-table-column prop="wireNum" label="展放数量" align="center" width="90"> </el-table-column>
      <el-table-column label="牵引方向" align="center" width="120">
        <template #default="scope">
          <el-switch v-model="scope.row.isStraight" active-text="正" inactive-text="反" @change=""> </el-switch>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" align="center" width="150">
        <template #default="scope">
          <el-button-group>
            <el-button type="primary" @click="" size="small">
              <Calculator theme="outline" size="18" fill="#fff" />
            </el-button>
            <el-button type="primary" @click="delO(scope.row.id)" size="small">
              <DeleteThemes theme="outline" size="18" fill="#fff" />
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <!-- <DialogOrderAdd :sectionId="sectionId" :visiable="showOrderAdd" @closed="showOrderAdd = false" /> -->
  </el-dialog>
</template>

<script lang="ts" setup>
import useOrder from '@/composables/useOrder'
import useTower from '@/composables/useTower'
import useWire from '@/composables/useWire'
import { Calculator, DeleteThemes, Plus, Switch } from '@icon-park/vue-next'
import { ref } from 'vue'

const searchValue = ref('')
const { visiable, sectionId } = defineProps<{
  visiable: boolean
  sectionId: number
}>()
const emit = defineEmits(['closed'])

const { add, all, del, orders } = useOrder()
const { find: findWire } = useWire()
const { find: findTower } = useTower()

const addOrder = async () => {
  await add({
    orderName: '牵引导线',
    isStraight: true,
    sectionId: 1,
    moZuNum: 1.015,
    wireNum: 1,
    daoYinWireId: 1,
    qianYinWireId: 1,
    qianYinTowerId: 1,
    zhangLiTowerId: 1,
  })
  await init()
}

async function init() {
  await all({ sectionId })
  for (const order of orders.value) {
    order.daoYinWire = await findWire(order.daoYinWireId)
    order.qianYinWire = await findWire(order.qianYinWireId)
    order.zhangLiTower = await findTower(order.zhangLiTowerId)
    order.qianYinTower = await findTower(order.qianYinTowerId)
  }
}

async function delO(id: number) {
  await del(id)
  await init()
}
init()
</script>
